<template>
  <div>
    <van-nav-bar title="BNUZ物业服务质量问卷调查"
                 left-text=""
                 left-arrow
                 @click-left="onClickLeft" />
    <div>
      <van-cell-group>
        <van-field v-model="username"
                   label="姓名"
                   placeholder="请输入姓名"
                   required />
        <rate-block v-for="(item,index) of data"
                    :key="index"
                    :data="item"></rate-block>
        <div class="text-box"><span>您希望春节期间小区举办哪些活动呢？</span></div>
        <van-checkbox-group v-model="result"
                            bind:change="onChange"
                            class="check-box-box">
          <van-checkbox v-for="(item,index) of entertainments"
                        :key="index"
                        :name="item.name"
                        class="check-box-box-box"
                        checked-color="#FFB6C1">{{item.text}}</van-checkbox>
        </van-checkbox-group>
        <van-field v-model="massgae"
                   label="建议"
                   type="textarea"
                   placeholder="建议(可选)"
                   autosize />
      </van-cell-group>
    </div>
    <!-- 弹出层，警告问卷未完成 -->
    <!-- 弹出层，提示问卷已成功提交 -->
    <van-submit-bar button-text="提交问卷"
                    bind:submit="onSubmit"
                    button-color="#72CACD"
                    v-b-modal.modal-prevent-closing />
    <div>
      <b-modal id="modal-prevent-closing"
               ref="modal"
               title="提示"
               @ok="handleOk">
        <form ref="form"
              @submit.stop.prevent="handleSubmit">
          <b-form-group>
            <p v-if="getShowErr">请完成问卷！</p>
            <p v-else>提交成功！</p>
          </b-form-group>
        </form>
      </b-modal>
    </div>
  </div>
</template>

<script>
import RateBlock from '@/components/Property/RateBlock'
export default {
  name: 'QuestionNaire',
  data () {
    return {
      data: [{
        question: '您对本APP的满意度',
        value: 0
      }, {
        question: '您对小区公共区域整洁的满意度',
        value: 0
      }, {
        question: '您对物业员工服务的满意度',
        value: 0
      }, {
        question: '您对小区活动室的满意度',
        value: 0
      }, {
        question: '您对小区春节晚会的满意度',
        value: 0
      }, {
        question: '您对小区物业外卖的满意度',
        value: 0
      }],
      username: '',
      massgae: '',
      result: ['b', 'd'],
      entertainments: [{
        name: 'a',
        text: 'BNUZ春节联欢晚会'
      }, {
        name: 'b',
        text: '迎元宵·猜灯谜'
      }, {
        name: 'c',
        text: '和平精英 · 刺激战场 · 小区伏地魔争霸赛'
      }, {
        name: 'd',
        text: '舌战群雄 · 你想要成为Rap Star吗？'
      }, {
        name: 'e',
        text: '办公椅竞速大赛'
      }, {
        name: 'f',
        text: '人有多大胆，地有多大产 · QQ农场养生局'
      }, {
        name: 'g',
        text: '淇澳岛沙雕大赛'
      }]
    }
  },
  computed: {
    getShowErr () {
      const i = this.data.filter((item) => {
        if (item.value !== 0) return true
      })
      if (i.length !== 0 && this.username !== '') return false
      return true
    }
  },
  components: {
    RateBlock
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onChange (event) {
      this.setData({
        result: event.detail
      })
    },
    onSubmit () {
      this.showSucs = true
    },
    handleOk (bvModalEvt) {
      // Prevent modal from closing
      bvModalEvt.preventDefault()
      // operate
      // close
      this.$nextTick(() => {
        this.$bvModal.hide('modal-prevent-closing')
      })
    }
  }
}
</script>
<style scoped>
.text-box {
  margin-top: 10px;
  height: 25px;
}
.text-box,
.check-box-box {
  padding-left: 16px;
  font-size: 14.5px;
  color: #4682b4;
  font-weight: bold;
}
.check-box-box-box {
  margin-bottom: 10px;
}
::v-deep .van-checkbox__label {
  color: #778899;
}

::v-deep .btn {
  background: rgb(114, 202, 205) !important;
  border: none;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-nav-bar .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-nav-bar .van-ellipsis {
  color: #fff;
}
</style>
